<template>
	<div>
    <div class="div2">
    	<img class="img1" src="../assets/img/mi.png" >
    	<ul class="ul3">
    		<li v-for="item in ul3">{{item}}</li>
    	</ul>
    	<input type="text" class="in1"/><input type="text" class="in2"/>
    </div>
    <div class="div4">
    <div class="div3">
    	<ul class="ul4">
    		<li v-for="item in ul4">{{item}}</li>
    	</ul>
      <div class="img2">
        <div class="block">
            <el-carousel height="460px">
              <el-carousel-item v-for="(item,index) in imgs" :key="item.id">
               <img :src="item.img"/>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
    </div>
    <div class="div5">
    	<img src="../assets/img/xm4.png" class="img3"/>
    	<img src="../assets/img/xm5.png" class="img4"/>
    	<img src="../assets/img/xm6.png" class="img5"/>
    	<img src="../assets/img/xm7.png" class="img6"/>
    </div>
    </div>
    <div class="div6">
    	<p class="p1">小米闪购</p>
      <div>{{date|data}}</div>
    	<img src="../assets/img/xm8.png" class="img7">
    	<img src="../assets/img/xm9.png" class="img8" >
    	<img src="../assets/img/xm10.png" class="img9">
    	<img src="../assets/img/xm11.png" class="img10" >
    	<img src="../assets/img/xm9.png" class="img11">
      <img src="../assets/img/xm51.jpg" class="img12">
    	<p class="p2">手机</p>
    	<div class="div7">
    		<img src="../assets/img/xm1.png" class="img13">
    		<img src="../assets/img/xm12.png" class="img14" @click="goods">
    		<img src="../assets/img/xm20.png" class="img15" >
    		<img src="../assets/img/xm21.png" class="img16" >
    		<img src="../assets/img/xm22.png" class="img17" >
    		<img src="../assets/img/xm23.png" class="img18" >
    		<img src="../assets/img/xm24.png" class="img19" >
    		<img src="../assets/img/xm25.png" class="img20" >
    		<img src="../assets/img/xm26.png" class="img21" >
    		<img src="../assets/img/xm51.jpg" class="img22">
    	</div>
    	<div>
    		<p class="p3">家电</p>
    		<div class="div8">
    			<img src="../assets/img/xm6.jpg" class="img23">
    			<img src="../assets/img/xm6.jpg" class="img24">
    			<img src="../assets/img/xm6.jpg" class="img25">
    			<img src="../assets/img/xm6.jpg" class="img26">
    			<img src="../assets/img/xm6.jpg" class="img27">
    			<img src="../assets/img/xm7.jpg" class="img28">
    			<img src="../assets/img/xm6.jpg" class="img29">
    			<img src="../assets/img/xm6.jpg" class="img30">
    			<img src="../assets/img/xm6.jpg" class="img31">
    			<img src="../assets/img/xm6.jpg" class="img32">
    		</div>
    	</div>
    </div>
    <p class="p4">智能</p>
    <div class="div8">
    	<img src="../assets/img/xm51.jpg" class="img33">
    	<img src="../assets/img/xm8.jpg" class="img34">
    	<img src="../assets/img/xm8.jpg" class="img35">
    	<img src="../assets/img/xm8.jpg" class="img36">
    	<img src="../assets/img/xm8.jpg" class="img37">
    	<img src="../assets/img/xm8.jpg" class="img38">
    	<img src="../assets/img/xm9.jpg" class="img39">
    	<img src="../assets/img/xm9.jpg" class="img40">
    	<img src="../assets/img/xm9.jpg" class="img41">
    	<img src="../assets/img/xm9.jpg" class="img42">
    	<img src="../assets/img/xm9.jpg" class="img43">
    </div>
    <p class="p5">搭配</p>
    <div class="div9">
    	<img src="../assets/img/xm12.jpg" class="img44">
    	<img src="../assets/img/xm10.jpg" class="img45">
    	<img src="../assets/img/xm10.jpg" class="img46">
    	<img src="../assets/img/xm10.jpg" class="img47">
    	<img src="../assets/img/xm10.jpg" class="img48">
    	<img src="../assets/img/xm10.jpg" class="img49">
    	<img src="../assets/img/xm11.jpg" class="img50">
    	<img src="../assets/img/xm11.jpg" class="img51">
    	<img src="../assets/img/xm11.jpg" class="img52">
    	<img src="../assets/img/xm11.jpg" class="img53">
    	<img src="../assets/img/xm11.jpg" class="img54">
    </div>
    <p class="p6">配件</p>
    <div class="div10">
    	<img src="../assets/img/xm12.jpg" class="img55">
    	<img src="../assets/img/xm13.jpg" class="img56">
    	<img src="../assets/img/xm13.jpg" class="img57">
    	<img src="../assets/img/xm13.jpg" class="img58">
    	<img src="../assets/img/xm13.jpg" class="img59">
    	<img src="../assets/img/xm13.jpg" class="img60">
    	<img src="../assets/img/xm14.jpg" class="img61">
    	<img src="../assets/img/xm14.jpg" class="img62">
    	<img src="../assets/img/xm14.jpg" class="img63">
    	<img src="../assets/img/xm14.jpg" class="img64">
    	<img src="../assets/img/xm14.jpg" class="img65">
    </div>
    <p class="p7">周边</p>
    <div class="div11">
    	<img src="../assets/img/xm12.jpg" class="img66">
    	<img src="../assets/img/xm16.jpg" class="img67">
    	<img src="../assets/img/xm16.jpg" class="img68">
    	<img src="../assets/img/xm16.jpg" class="img69">
    	<img src="../assets/img/xm16.jpg" class="img70">
    	<img src="../assets/img/xm16.jpg" class="img71">
    	<img src="../assets/img/xm15.jpg" class="img72">
    	<img src="../assets/img/xm15.jpg" class="img73">
    	<img src="../assets/img/xm15.jpg" class="img74">
    	<img src="../assets/img/xm15.jpg" class="img75">
    	<img src="../assets/img/xm13.png" class="img76">
    </div>
    <div class="div12">
    	<p class="p8">视频</p>
    	<img src="../assets/img/xm18.png" class="img82">
    	<img src="../assets/img/xm17.jpg" class="img77">
    	<img src="../assets/img/xm14.png" class="img78">
    	<img src="../assets/img/xm15.png" class="img79">
    	<img src="../assets/img/xm16.png" class="img80">
    	<img src="../assets/img/xm17.png" class="img81">
    	<img src="../assets/img/xm19.png" class="img83">
    </div>
  </div>
</template>
<script>
	export default{
    name:"indexbody",
		data(){
			return{
        ul3:["小米手机","Redmi手机","电视","笔记本","家电","路由器","只能硬件","服务","社区"],
        ul4:["手机电话卡","电视盒子","笔记本平板","家电插线板","出行穿戴","智能路由器","电源配件","健康儿童","耳机音箱","生活箱包",],
        imgs:[{
        	id:1,
        	img:require("../assets/img/xm3.png")
        },
        {
        	id:2,
        	img:require("../assets/img/xm3.png")
        },
        {
        	id:3,
        	img:require("../assets/img/xm3.png")
        },
        {
        	id:4,
        	img:require("../assets/img/xm3.png")
        }
        ],
        date: new Date(),
			}
		},
		components:{
		},
		methods:{
      goods(){
        this.$router.push({name:"goods"})
      }
		},
    mounted(){
     let nowtime = this; // 声明一个变量指向Vue实例this，保证作用域一致
          this.timer = setInterval(() => {
            nowtime.date = new Date(); // 修改数据date
          }, 1000)
    },
     beforeDestroy() {
        if (this.timer) {
          clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
      },
    filters: {
      data:function (input) {
        var d = new Date(input);
        var hour = d.getHours();
        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        return hour + ':' + minutes + ':' + seconds;
      },
    }
	}
</script>

<style scoped="scoped">
  @import url("../assets/style/xiao.css");
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
      }

      .el-carousel__item:nth-child(2n) {
         background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n+1) {
         background-color: #d3dce6;
      }
</style>
